<template>
	<view class="body">
		<view class="agency">
			<view class="agency-left">
				<view class="title"><text class="iconfont icon-xian"></text>{{obj.address}}</view>
				<view class="time">
					{{obj.inoculateDate|formatMonthDate}}剩余/总号源
					<text class="num">{{obj.vaccineOver}}/{{obj.vaccineTotal}}</text>
				</view>
			</view>
			
			<view class="agency-right">
				<button @click="change()">切换</button>
			</view>
		</view>
		
		
		
		<view class="choose">
			
			<view class="top">
				<view class="top-left">
					名称
				</view>
				<view class="top-right">
					{{obj.vaccineBrand}}个人预约第{{obj.needleNum | needleNumFilter }}针
				</view>
			</view>
			
			<view class="bottom">
				<view class="bottom-title">
					选择预约时间
				</view>
				
				<view class="bottom-content">
					<view v-for="(item,index) in timeArrs" :key="index" class="time-item" 
					v-bind:class="{ischeck:index==current}" v-on:click="exchange(index)">
						{{item.period}} <br/>余{{item.vaccineTotal}}
					</view>
				</view>
			</view>
			
			
		</view>
		
		<view class="notice">
			<p>预约须知：</p>
			<p>1.预约接种新冠疫苗年龄要求：18岁-59岁。</p>
			<p>2.接种前需签署疫苗接种知情同意书。</p>
			<p>3.预约后未前往接种视为一次爽约，累计3次纳入违约名单，3个月内无法再次预约。</p>
		</view>
		
		
		<button class="btn-submit" @click="submitReservation" :disabled="isDisabled">提交预约</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				obj : {},
				timeArrs : [],
				current : -1,
				reservation : {},
				isDisabled : false 
			}
		},
		methods: {
			async getTimeInterval(nid) {
				const res = await this.$request({
					url:'/api/v1/needlenum/period/' + nid,
					header:{
						'Authorization': 'Bearer ' + this.$getStorageSync("token") 
					},
					method:'GET'
				}) ;
				this.timeArrs = res.data.data ;
			},
			exchange:function(index) {
				this.current=index ;
				
				this.reservation.reservationDate = this.$formatDate(this.obj.inoculateDate) ;
				this.reservation.needleNum = this.obj.needleNum ;
				this.reservation.period = this.timeArrs[index].period ;
				this.reservation.vaccineBrand = this.obj.vaccineBrand ;
				this.reservation.nid = this.obj.nid ;
				this.reservation.address = this.obj.address ;
				this.reservation.detailed = this.obj.detailed ;
				this.isDisabled = this.timeArrs[index].vaccineTotal<=0 ;
				this.reservation.pid = this.timeArrs[index].pid ;
			},
			submitReservation() {
				let that = this ;
				if(JSON.stringify(this.reservation)=='{}') {
					uni.showToast({
						title:'请选择时间段',
						mask:true,
						duration:2000
					});
					return;
				}
				
				uni.showModal({
					title: '提示',
					content: '您确定预约?',
					success: async function (res) {
	
						if (res.confirm) {
							const res = await that.$request({
								url:'/api/v1/reservation' ,
								data : that.reservation,
								header:{
									'Content-Type': 'application/x-www-form-urlencoded',
									'Authorization': 'Bearer ' + that.$getStorageSync("token")
								},
								method:'POST'
							}) ;
							
							
							if(res.data.code == 200) {
								uni.redirectTo({
									url : '/pages/me/reservation_recored' 
								}) 
							} else if(res.data.code == 401) {
								uni.showToast({
									title:'请登录APP',
									mask:true,
									duration:3000,
									icon:'none'
								});
								
								setTimeout(()=>{
									uni.redirectTo({
										url : '/pages/me/login' 
									}) 
								},3000) ;
								
							} else {
								uni.showToast({
									title:res.data.message,
									mask:true,
									duration:3000,
									icon:'none'
								});
							}
						} else if (res.cancel) {
							console.log('取消预约');
						}
					}
				});
			},
			change() {
				uni.navigateTo({
					url:'/pages/agency/agency?needleNum=' + this.obj.needleNum
				}) ;
			}
		},
		onLoad:function(options) {
			this.obj = options ;
			this.getTimeInterval(options.nid) ;
		},
		filters:{
			needleNumFilter : function( val ) {
			    let r = '一' ;
				switch(val) {
					case '2' : 
						r = '二';break;
					case '3' :
						r = '三';break;
				}
			    return r; 
			  }
		}
	}
</script>

<style>
	@import url("appointment.css");
</style>
